<template>
  <div class="product-main-detail">
    <el-steps :active="step" finish-status="success">
      <el-step title="商品基本信息" />
      <el-step title="添加库存信息" />
      <el-step title="添加移动端详情" />
    </el-steps>

    <!-- 表单 -->
    <el-card shadow="never" class="margin-30">
      <el-form ref="form" :model="product" :rules="rules" label-width="80px" size="mini">
        <div v-show="step === 1">
          <!-- 公共头 -->
          <div class="common-header">
            <h4 class="common-title">基本信息</h4>
            <el-divider />
          </div>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="商品名称" prop="name">
                <el-input v-model="product.name" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="商品编码">
                <el-input v-model="product.productSn" />
              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="商品分类">
                <el-select v-model="product.productCategoryId" placeholder="商品分类" clearable filterable @change="productCategoryChange">
                  <el-option
                    v-for="item in productCategoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>

              </el-form-item>
            </el-col>

          </el-row>
          <!-- 公共头 -->
          <div class="common-header">
            <h4 class="common-title">基本信息</h4>
            <el-divider />
          </div>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="商品原价" prop="originalPrice">
                <el-input-number
                  v-model="product.originalPrice"
                  style="width:100%"
                  :controls="true"
                  controls-position="both"
                  placeholder="商品原价"
                />

              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="促销类型">
                <!--  // 促销类型：0->没有促销使用原价;1->使用促销价；2->使用会员价；3->使用阶梯价格；4->使用满减价格；5->限时购 , -->
                <el-select v-model="product.promotionType" style="width:100%" disabled placeholder="促销类型" clearable filterable>
                  <el-option
                    v-for="item in promotionTypeList"
                    :key="item.promotionType"
                    :label="item.value"
                    :value="item.promotionType"
                  />
                </el-select>

              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="活动价格">
                <el-input-number
                  v-model="product.promotionPrice"
                  style="width:100%"
                  size="mini"
                  disabled
                  :min="1"
                  :step="1"
                  :controls="true"
                  controls-position="both"
                />

              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="重量(kg)">
                <el-input-number
                  v-model="product.weight"
                  style="width:100%"
                  size="mini"
                  :min="0.001"
                  :step="1"
                  :controls="true"
                  controls-position="both"
                />

              </el-form-item>
            </el-col>

            <el-col :span="8" :offset="0" />
            <el-col :span="8" :offset="0" />
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="审核状态" size="normal">
                <!-- 'verifyStatus': 0, //  审核状态：0->未审核；1->审核通过 , -->
                <el-switch v-model="product.verifyStatus" :active-value="1" :inactive-value="0" />

              </el-form-item>

            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="审核是否上架" size="normal">
                <!-- // 上架状态：0->下架；1->上架 , -->
                <!-- 'publishStatus': 0, -->
                <el-switch v-model="product.publishStatus" :active-value="1" :inactive-value="0" />

              </el-form-item>

            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="缩略图">
                <el-upload
                  ref="uploadPicRef"
                  class="avatar-uploader"
                  :action="uploadFileOss"
                  :headers="token"
                  :on-success="handleCoverImgSuccess"
                  :before-upload="beforeCoverUpload"
                >
                  <img v-if="product.pic" :src="product.pic" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>

            </el-col>

          </el-row>
          <!-- 公共头 -->
          <div class="common-header">
            <h4 class="common-title">其他信息</h4>
            <el-divider />
          </div>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0" />
            <el-col :span="12" :offset="0" />
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12" :offset="0" />
            <el-col :span="12" :offset="0" />
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="产品服务" size="mini">
                <!--  //  以逗号分割的产品服务：1->无忧退货；2->快速退款；3->免费包邮 , -->
                <el-checkbox-group v-model="product.serviceIds">
                  <el-checkbox label="1">无忧退货</el-checkbox>
                  <el-checkbox label="2">快速退款</el-checkbox>
                  <el-checkbox label="3">免费包邮</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

            </el-col>

          </el-row>

        </div>
        <div v-show="step === 2">
          <!-- 公共头 -->
          <div class="common-header">
            <h4 class="common-title">商品sku信息</h4>
            <el-divider />
          </div>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="标题" prop="detailTitle">
                <el-input v-model="product.detailTitle" placeholder="标题" clearable />

              </el-form-item>

            </el-col>
            <el-col :span="10" :offset="0">
              <el-form-item label="副标题">
                <el-input v-model="product.detailDesc" placeholder="副标题" clearable />

              </el-form-item>

            </el-col>
            <el-col :span="12" :offset="0" />
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24" :offset="0">
              <el-form-item label="画册图片">
                <el-upload
                  ref="albumUploadRef"
                  :action="uploadFileOss"
                  list-type="picture-card"
                  :on-success="albumUploadSucss"
                  :headers="token"
                  :file-list="fileList"
                >
                  <i slot="default" class="el-icon-plus" />
                  <div slot="file" slot-scope="{file}">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    >
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in" />
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download" />
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <i class="el-icon-delete" />
                      </span>
                    </span>
                  </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </el-form-item>

            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="24" :offset="0">
              <el-form-item label="sku设置">
                <div v-if="tempColorSku.arr.length>0">
                  <span>颜色：</span>
                  <el-checkbox-group v-model="tempColorSku.selectedArr" style="display:inline-block;">
                    <el-checkbox v-for="item in tempColorSku.arr" :key="item" :label="item">
                      {{ item }}
                      <el-button type="text" size="mini" style="color:red;margin-left: 10px;">删除</el-button>

                    </el-checkbox>

                  </el-checkbox-group>
                </div>
                <div v-if="tempSizeSku.arr.length>0">
                  <span>大小：</span>
                  <el-checkbox-group v-model="tempSizeSku.selectedArr" style="display:inline-block;">
                    <el-checkbox v-for="item in tempSizeSku.arr" :key="item" :label="item">
                      {{ item }}
                      <el-button type="text" size="mini" style="color:red;margin-left: 10px;">删除</el-button>
                    </el-checkbox>

                  </el-checkbox-group>
                </div>

                <div>
                  <el-input v-model="tempColorSku.text" style="width:200px" placeholder="颜色描述：比如土豪金" clearable />
                  <el-button style="margin:0 20px" type="default" size="mini" @click="createOption('color')">创建颜色选项</el-button>
                  <el-input v-model="tempSizeSku.text" style="width:200px" placeholder="大小描述：比如64g" clearable />
                  <el-button style="margin-left: 20px" type="default" size="mini" @click="createOption('size')">创建大小选项</el-button>
                  <el-button type="primary" size="mini" style="margin-left:300px" @click="buildSkuList">生成Sku列表</el-button>
                  <el-button type="primary" size="mini">新增Sku</el-button>
                </div>
                <!-- sku 列表 -->
                <el-table v-if="pmsSkuStockList.length>0" style="margin-top: 10px;" :data="pmsSkuStockList" border stripe>
                  <el-table-column
                    type="index"
                    label="#"
                    width="50"
                    align="clenter"
                  />
                  <el-table-column

                    label="图片"
                    width="100"
                    align="clenter"
                  >
                    <template slot-scope="scope">
                      <el-upload
                        :ref="scope.row.tempId+'upload'"
                        :action="uploadFileOss"
                        :headers="token"
                        :on-success="handleSkuImgSucc"
                        @click.native="handUplaodSkuImgEvent(scope.row.tempId)"
                      >
                        <img v-if="scope.row.pic" width="80" height="80" :src="scope.row.pic" alt="">
                        <el-button v-else slot="trigger" size="large" icon="el-icon-plus" />
                      </el-upload>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="颜色"
                    width="200"
                    align="clenter"
                  >
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.color" placeholder="颜色" clearable />

                    </template>
                  </el-table-column>
                  <el-table-column
                    label="大小"
                    width="200"
                    align="clenter"
                  >
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.size" placeholder="大小" clearable />

                    </template>
                  </el-table-column>
                  <el-table-column
                    label="库存"
                    width="200"
                    align="clenter"
                  >
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.stock" placeholder="库存" clearable />

                    </template>
                  </el-table-column>
                  <el-table-column
                    label="锁定库存"
                    width="200"
                    align="clenter"
                  >
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.lockStock" placeholder="锁定库存" clearable />

                    </template>
                  </el-table-column>
                  <el-table-column
                    label="预警库存"
                    width="200"
                    align="clenter"
                  >
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.lowStock" placeholder="预警库存" clearable />

                    </template>
                  </el-table-column>
                  <el-table-column
                    label="sku编码"
                    width="200"
                    align="clenter"
                  >
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.skuCode" placeholder="sku编码" clearable />

                    </template>
                  </el-table-column>
                  <el-table-column
                    label="价格"
                    width="200"
                    align="clenter"
                  >
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.price" placeholder="价格" clearable />

                    </template>
                  </el-table-column>
                  <el-table-column
                    label="销量"
                    width="200"
                    align="clenter"
                  >
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.sale" placeholder="销量" clearable />

                    </template>
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="200"
                    align="clenter"
                  >
                    <template>
                      <el-button type="text" size="mini">删除</el-button>

                    </template>
                  </el-table-column>

                </el-table>

              </el-form-item>

            </el-col>

          </el-row>

        </div>
        <div v-show="step === 3">
          <!-- 公共头 -->
          <div class="common-header">
            <h4 class="common-title">详情描述</h4>
            <el-divider />
          </div>
          <el-row :gutter="20">
            <el-col :span="24" :offset="0">
              <el-form-item label="商品详情" size="normal">
                <Tinymce v-model="product.detailMobileHtml" />
              </el-form-item>

            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="24" :offset="0">
              <el-form-item label="备注" size="normal">
                <el-input v-model="product.note" type="textarea" placeholder="备注" clearable />

              </el-form-item>
            </el-col>

          </el-row>

        </div>

        <el-form-item>
          <el-button v-if="step!==1" type="default" @click="preStep">返回上一步</el-button>
          <el-button type="primary" @click="nextStep">
            {{ step===1?'下一步，填写库存信息':step===2?'下一步，填写移动端详情':'提交保存' }}
          </el-button>

        </el-form-item>
      </el-form>

    </el-card>

  </div>
</template>
<script>
import { v4 as uuidv4 } from 'uuid'
import Tinymce from '@/components/Tinymce'
import {
  getAllCategory as getAllCategoryApi,
  addProductAndSkus as addProductAndSkusApi,
  productSkusDetail as productSkusDetailApi
} from '@/api/product'
import mix from '@/mixins'

export default {
  name: 'ProductDetail',
  components: {
    Tinymce
  },
  mixins: [mix],
  data() {
    var checkOriginalPrice = (rule, value, callback) => {
      if (!value) {
        callback('原价必填')
      } else if (isNaN(value)) {
        callback('原价必须是数值类型')
      } else if (value <= 0) {
        callback('原价必须大于0')
      } else {
        callback()
      }
    }
    return {
      step: 1,
      product: {
        weight: 0,
        pic: '', // 封面图片
        serviceIds: [], // 产品服务,最终提交arr==>string
        albumPics: [] // 画册,最终提交arr==>string
      }, // 商品对象
      // # https://github.com/yiminghe/async-validator
      rules: {
        name: [{ required: true, message: '商品名称必填', trigger: 'blur' }],
        detailTitle: [{ required: true, message: '标题必填', trigger: 'blur' }],
        // originalPrice: [{ required: true, message: '商品原价必填', trigger: 'blur' }]
        originalPrice: [{ validator: checkOriginalPrice, trigger: 'blur' }]
      },
      productCategoryList: [], // 商品分类列表
      // 0->没有促销使用原价;1->使用促销价；2->使用会员价；3->使用阶梯价格；4->使用满减价格；5->限时购
      promotionTypeList: [
        {
          promotionType: 0,
          value: '没有促销使用原价'
        },
        {
          promotionType: 1,
          value: '使用促销价'
        },
        {
          promotionType: 2,
          value: '使用会员价'
        },
        {
          promotionType: 3,
          value: '使用阶梯价格'
        },
        {
          promotionType: 4,
          value: '使用满减价格'
        },
        {
          promotionType: 5,
          value: '限时购'
        }

      ],
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      tempColorSku: {
        text: '',
        selectedArr: ['天空蓝'],
        arr: ['天空蓝', '土豪金', '玫瑰红']
        // selectedArr: [],
        // arr: []
      },
      tempSizeSku: {
        text: '',
        selectedArr: ['128g'],
        arr: ['128g', '64g', '256g']
        // selectedArr: [],
        // arr: []
      },
      pmsSkuStockList: [], // 生成的sku列表
      tempId: '', // 临时
      firstParamsList: ['name', 'originalPrice'],
      secondParamsList: ['detailTitle'],
      productId: '', // 用于编辑商品
      fileList: [] // 回显上传图片列表
    }
  },
  watch: {
  },
  created() {
    this.getProductCategoryList()
    this.productId = this.$route.params.id
    if (this.productId) { // 获取商品详情
      this.getProductDetail()
    }
  },
  mounted() {
  },
  methods: {
    // 获取商品详情
    async getProductDetail() {
      const res = await productSkusDetailApi(this.productId)
      const { success, data, message } = res
      if (success) {
        this.product = data.product
        this.product.albumPics = this.product.albumPics.split(',')
        this.product.albumPics.forEach(item => {
          this.fileList.push({
            name: item.substring(item.lastIndexOf('/') + 1),
            url: item
          })
        })

        this.pmsSkuStockList = data.skus
      } else {
        this.$message.error(message)
      }
    },
    // 下一步
    nextStep() {
      if (this.step === 3) {
        // todo 去提交信息
        this.submitProduct()
      } else {
        // this.$refs.form.validate((valid, obj) => {
        //   if (valid) { // 校验通过
        //     console.log('1', obj)
        //     this.step++
        //   } else { // 校验没通过
        //     console.log('2', obj)
        //   }
        // })
        let valid = true
        let params = []
        if (this.step === 1) {
          params = this.firstParamsList
        } else if (this.step === 2) {
          params = this.secondParamsList
        }
        this.$refs.form.validateField(params, (errorMsg) => {
          if (errorMsg) { // 有错误信息 校验没通过
            console.log('errorMsg', errorMsg)
            valid = valid && false
          } else { // 校验通过
            valid = valid && true
          }
        })

        if (valid) {
          this.step++
        }
      }
    },
    // 新增 或者 修改 商品
    async submitProduct() {
      // const paramsObj = {
      //   pmsSkuStockList: this.pmsSkuStockList,
      //   product: this.product
      // }
      const pmsSkuStockListNew = []
      this.pmsSkuStockList.forEach(item => {
        pmsSkuStockListNew.push({
          ...item,
          spData: JSON.stringify([
            {
              key: '颜色',
              value: item.color
            },
            {
              key: '大小',
              value: item.size
            }
          ])
        })
      })
      const paramsObj = {
        pmsSkuStockList: pmsSkuStockListNew,
        product: {
          'albumPics': 'https://img14.360buyimg.com/n7/jfs/t1/74709/3/25371/40374/63df56ffF1d13c4cc/bd1804b23dc022db.jpg,https://img10.360buyimg.com/n7/jfs/t1/190781/20/31500/38360/63df5740F3376877a/f78a050a7da59931.jpg,https://img10.360buyimg.com/n7/jfs/t1/104594/36/36636/41922/63df571fF7b49a287/188c1a1e8d601ce6.jpg', // 画册图片，连产品图片限制为5张，以逗号分割 ,会在移动端商品详情页展示
          'brandId': '1328880034681815042', // 关联的 品牌id
          'brandName': '简野 (JIANYE)', // 品牌名称

          'description': '意式极简北欧轻奢卧室电视柜高款现代北欧储物柜小户型精品家具 卧室电视柜（两门）', // 意式极简北欧轻奢卧室电视柜高款现代北欧储物柜小户型精品家具 卧室电视柜（两门）
          // detail是进入详情页展示的内容
          'detailDesc': '家具新品大赏：1件7.5折，2件7.2折，满额在享2%现金返现，超值好礼送不停！时间：11.14-11.20', // 副标题 家具新品大赏：1件7.5折，2件7.2折，满额在享2%现金返现，超值好礼送不停！时间：11.14-11.20

          'detailMobileHtml': '<h1>移动端展示方式,商品的富文本内容,放到这个字段</h1>', // 移动端展示方式,商品的富文本内容,放到这个字段
          'detailTitle': '简野 电视柜 意式极简北欧轻奢卧室电视柜高款现', // 标题 简野 电视柜 意式极简北欧轻奢卧室电视柜高款现代北欧储物柜小户型精品家具 卧室电视柜（两门）

          'giftGrowth': 0, // 赠送的成长值(预留)
          'giftPoint': 0, // 赠送的积分(预留)

          'keywords': '手机,电子，iphone', // 关键词,逗号分割,  地中海,凳子,xxx
          'lowStock': 1000, // 预警库存(预留)

          'name': 'iphone20', // 商品名称 简野（JIANYE）ZY-22
          'newStatus': 1, // 新品状态:0->不是新品；1->新品 ,新品会在移动端首页推荐
          'note': '小舅子供货不入账', // 备注,比如小舅子供货不入账 ,
          'originalPrice': 20000, // 原价
          'pic': 'https://img14.360buyimg.com/n7/jfs/t1/181341/20/31852/40374/63df581dF1aa598e4/75a1e911ad2bedd3.jpg', // 封面图片
          'previewStatus': 0, // 是否为预告商品：0->不是；1->是 ,
          'price': 19999, // 当前价格

          'productCategoryId': '1308339256886423554', // 分类id
          'productCategoryName': '创意', // 分类名称
          'productSn': '39329342098', // 商品编码,需要手填.
          // promotion都可以不填,可以通过营销管理处理
          'promotionEndTime': '', // 可以不填. 促销结束时间 ,可以通过营销管理修改
          'promotionPerLimit': 0,
          'promotionPrice': 0, // 活动价格
          'promotionStartTime': '',
          // 促销类型：0->没有促销使用原价;1->使用促销价；2->使用会员价；3->使用阶梯价格；4->使用满减价格；5->限时购 ,
          'promotionType': 0,
          // 上架状态：0->下架；1->上架 ,
          'publishStatus': 1,
          // 推荐状态；0->不推荐；1->推荐 ,
          'recommendStatus': 1,
          // 销量,不用处理
          'sale': 0,
          //  以逗号分割的产品服务：1->无忧退货；2->快速退款；3->免费包邮 ,
          'serviceIds': '1,2,3', // 1,2
          'sort': 999, // 排序,降序.值越大越靠前
          'stock': 110000, // 库存
          'subTitle': 'subTitle', // 二级标题
          'unit': '部', // 单位,比如 斤/辆/台

          'verifyStatus': 1, //  审核状态：0->未审核；1->审核通过 ,
          'weight': 0.1 // 商品重量，默认为千克
        }
      }
      console.log('paramsObj=>', paramsObj)
      const res = await addProductAndSkusApi(paramsObj)
      const { success, message } = res
      if (success) {
        // todo 跳转页面
      } else {
        this.$message.error(message)
      }
    },
    // 上一步
    preStep() {
      this.step--
    },
    // 获取商品分类
    async getProductCategoryList() {
      const res = await getAllCategoryApi()
      const { success, data, message } = res
      if (success) {
        const lejuCategory = data.items.find(item => item.category.name === '乐居')
        // console.log('lejuCategory==>', lejuCategory)
        this.productCategoryList = lejuCategory.children
      } else {
        this.$message.error(message)
      }
    },
    // 选中商品分类
    productCategoryChange(id) {
      this.product.productCategoryName = this.productCategoryList.find(item => item.id === id).name
    },
    // 缩略图上传前格式校验
    beforeCoverUpload(file) {
      // 自己写校验规则
      return true
    },
    // 缩略图上传成功
    handleCoverImgSuccess(res) {
      // console.log('res=>', res)
      const { success, data, message } = res
      if (success) {
        this.product.pic = data.fileUrl
        this.$refs.uploadPicRef.clearFiles()
      } else {
        this.$message.error(message)
      }
    },
    // 画册上传成功
    albumUploadSucss(res) {
      const { success, data, message } = res
      if (success) {
        this.product.albumPics.push(data.fileUrl)
      } else {
        this.$message.error(message)
      }
    },
    handleRemove(file) {
      console.log(file)
      // 少量数据 可以使用 filter 进行删除操作
      this.product.albumPics = this.product.albumPics.filter(item => item !== file.response.data.fileUrl)
      console.log(this.$refs.albumUploadRef)
      this.$refs.albumUploadRef.uploadFiles = this.$refs.albumUploadRef.uploadFiles.filter(item => item.uid !== file.uid)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    },
    // 创建 sku 选项
    createOption(type) {
      if (type === 'color') {
        const text = this.tempColorSku.text
        if (text) {
          if (this.tempColorSku.arr.indexOf(text) !== -1) {
            this.$message.warning(`选项：${text}已经存在！！！`)
            return
          }
          this.tempColorSku.arr.push(text)
          // 清空输入框
          this.tempColorSku.text = ''
        } else {
          this.$message.warning('请填写颜色选项！！！')
        }
      } else if (type === 'size') {
        const text = this.tempSizeSku.text
        if (text) {
          if (this.tempSizeSku.arr.indexOf(text) !== -1) {
            this.$message.warning(`选项：${text}已经存在！！！`)
            return
          }
          this.tempSizeSku.arr.push(text)
          // 清空输入框
          this.tempSizeSku.text = ''
        } else {
          this.$message.warning('请填写大小选项！！！')
        }
      }
    },
    // 生成sku 列表
    buildSkuList() {
      const colorSelectedArr = this.tempColorSku.selectedArr
      const sizeSelectedArr = this.tempSizeSku.selectedArr
      if (colorSelectedArr.length > 0 && sizeSelectedArr.length > 0) {
        this.$confirm('此操作将清空sku列表,并生成新的列表, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        //  点击的确定
          this.pmsSkuStockList = []
          for (var i = 0; i < colorSelectedArr.length; i++) {
            for (var j = 0; j < sizeSelectedArr.length; j++) {
              this.pmsSkuStockList.push({
              // 'id': 'string', // 如果是新增 不需要
                tempId: uuidv4(), // ⇨ '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'
                'lockStock': 10, // 锁定库存
                'lowStock': 100, // 库存警戒线
                'pic': '', // 图片
                'price': 1000, // 当前价格
                // 'productId': 'string', // 商品的id,如果是新增,不需要
                'promotionPrice': 999, // 单品促销价格
                'sale': 0, // 销量
                'skuCode': '', // sku的编码,手动填写
                // spData:  [{"key":"颜色","value":"蓝色"},{"key":"容量","value":"32G"}]
                // 'spData': '', // sku属性，json格式String类型 ,
                color: colorSelectedArr[i],
                size: sizeSelectedArr[j],
                'stock': 10000 // 库存
              })
            }
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      } else {
        this.$message.warning('颜色和大小选项每个只少有一个')
      }
    },
    // sku 列表 图片上传成功
    handleSkuImgSucc(res) {
      const { success, data, message } = res
      if (success) {
        this.pmsSkuStockList.find(item => item.tempId === this.tempId).pic = data.fileUrl
        this.$refs[this.tempId + 'upload'].clearFiles()
      } else {
        this.$message.error(message)
      }
    },
    // 处理sku上传图片事件
    handUplaodSkuImgEvent(tempId) {
      // console.log('tempId==>', tempId)
      this.tempId = tempId
    }

  }
}
</script>
<style lang="scss" scoped>
.product-main-detail{
  .el-steps{
    background-color: #fff;
    padding: 50px 300px;
  }
  .common-title{
    font-weight: normal;
    padding: 0;
    margin: 0;
  }
  .el-divider--horizontal{
    margin: 10px 0;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
